<template>
    <!-- 对话框表单 -->
    <el-dialog title="编辑" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" @close="closeFun">
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="120">
                <el-form-item prop="name" label="名称">
                    <el-input v-model="formData.name" type="string" placeholder="请输入名称" clearable
                        maxlength="50"></el-input>
                </el-form-item>
                <el-form-item prop="url" label="连接">
                    <el-input v-model="formData.url" type="string" placeholder="请输入连接" clearable
                        maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="'图片(' + imgRemark + ')'" prop="image">
                    <FileUpload v-model="formData.image" :limit="1"></FileUpload>
                </el-form-item>
            </el-form>

            <el-row>
                <el-col style="text-align: center;" :span="24">
                    <el-button @click="closeFun()">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose, inject, defineEmits } from 'vue';
import { addRecommend, editRecommend } from '@/api/recommend';
import { useRoute } from 'vue-router';
const route = useRoute();

let emit = defineEmits(['update']);
let used = inject('used');//公共方法
let visible = ref(false);//是否显示
let formData = reactive({
    id: '',
    name: '',
    url: '',
    image: '',
});//表单数据
let ruleFormRef = ref(null);//表单
//表单验证
const rules = reactive(
    {
        name: [
            { required: true, message: '请输入网站名', trigger: 'blur' },
        ],
        url: [
            { required: true, message: '请输入链接', trigger: 'blur' },
        ],
        image: [
            { required: true, message: '请选择图片', trigger: 'change' },
        ],

    }
)
let imgRemark = ref(route.query.remark);//图片尺寸备注
//显示
const show = (row, id) => {
    if (row) {
        Object.assign(formData, row);
    } else {
        Object.assign(formData, {
            id: '',
            name: '',
            url: '',
            image: '',
            type_id: id,

        });
    }
    visible.value = true;
};
//关闭
const closeFun = () => {
    visible.value = false;
};

//提交
const submitForm = async (formEl) => {
    let params = used.deepClone(formData)
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let res = await (params.id ? editRecommend(params, 'post') : addRecommend(params, 'post'));
            if (res.code == 1) {
                used.msgSuccess('更新成功')
                closeFun();
                emit('subOk');
            } else {
                used.msgError(res.message)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

defineExpose({
    show
})
</script>

<style scoped lang="scss"></style>
